<nav>
  <ul class="pagination">
    <li
      class="page-item"
      [appClass]="{disabled:currentPage === 0}"
    >
      <a class="page-link" (click)="currentPage = currentPage -1" >Prev</a>
    </li>

    <ng-container>
    @for (image of images; track image.title;let i = $index) {
      <li class="page-item" [appClass]="{active : i === currentPage}">
        @if(checkWindowIndex(i)){
          <a (click)="currentPage = i" class="page-link">
            {{ i + 1 }}
          </a>
        }

      </li>
    }
    </ng-container>



    <li
      class="page-item"
      [appClass]="{disabled:currentPage === images.length - 1 }"
    >
      <a class="page-link" (click)="currentPage = currentPage + 1">Next</a>
    </li>
  </ul>
</nav>

<div>
  <h4>{{ images[currentPage].title }}</h4>
  <img [src]="images[currentPage].url" />
</div>

<ul>

</ul>
